var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextPlugin = require('extract-text-webpack-plugin');
var clearWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
    context:__dirname,
    entry: {
        app:['./src/app.js','./src/app_config.js']
    },
    output: {
        path: __dirname + '/www',
        // publicPath:'/www/',
        filename: 'assets/js/[name].js'
    },
    plugins: [
        //把主html模版文件生成为项目启动时的入口html文件
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            inject: 'body'
        }),
        //把import到app.js里面的css或scss文件抽离出来打包成独立css文件
        new extractTextPlugin('assets/css/style.css'),
        // 重新构建时清除之前构建的文件
        new clearWebpackPlugin(['dist','www'],{
            "root": __dirname,
            "verbose": true,
            "watch": true
        })
    ],
    module:{
        rules:[
            {
                test:/\.html$/,
                loader:"html-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/i,
                use: [
                    {
                        loader: 'url-loader',
                        query: {
                            limit: 10000,
                            name: 'assets/img/[name]-[hash:8].[ext]'
                        }
                    },
                    // {
                    //     loader: 'file-loader',
                    //     query: {
                    //         name: 'assets/[name]-[hash].[ext]'
                    //     },
                    // }
                ]

            },
            {
                test: /\.(css|scss)$/,
                loader:  extractTextPlugin.extract({
                    fallback: 'style-loader', use: 'css-loader?importLoaders=1!postcss-loader!sass-loader'
                })
            },
            {   //让以.js结尾的JavaScript文件经过babel把其中es6的代码转成es5的代码
                test:/\.js$/,
                loader:"babel-loader",
                exclude: path.resolve(__dirname,'node_modules'),
                include: path.resolve(__dirname,'src'),
                query:{
                    presets:['env']
                }
            },

        ]
    },
    devServer: {
        // 配置监听端口, 因为8080很常用, 为了避免和其他程序冲突, 我们配个其他的端口号
        port: 8100,

        /*
         historyApiFallback用来配置页面的重定向

         SPA的入口是一个统一的html文件, 比如
         http://localhost:8010/foo
         我们要返回给它
         http://localhost:8010/index.html
         这个文件

         配置为true, 当访问的文件不存在时, 返回根目录下的index.html文件
         */
        historyApiFallback: true
    }
};
